<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0px;padding:0px;list-style: none;}
        #wrapper{width: 590px;height: 470px;position: relative;
        margin:120px auto;}
        #wrapper li{
            position: absolute;
            opacity: 0;
        }
        #wrapper li:first-child{
            opacity: 1;
        }
        p{
            position: absolute;
            width: 100%;
            height: 40px;
            bottom: 10px;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background:#ffffff;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            margin-right:20px;
        }
        span.active{
            background: crimson;
            color:#ffffff;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <ul>
            <!-- <li><img src="banner/1.jpg.webp"/></li>
            <li><img src="banner/2.jpg"/></li>
            <li><img src="banner/3.jpg"/></li>
            <li><img src="banner/4.jpg"/></li>
            <li><img src="banner/5.jpg"/></li>
            <li><img src="banner/6.jpg"/></li>
            <li><img src="banner/7.jpg"/></li>
            <li><img src="banner/8.jpg"/></li> -->
        </ul>
        <p>
            <!-- <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span> -->
        </p>
    </div>
    <script src="common/Style.js"></script>
    <script src="common/move.js"></script>
    <script>
        var span = document.getElementById("wrapper").getElementsByTagName("span");
        var li = document.getElementsByTagName("li");
        var ul = document.getElementById("wrapper").getElementsByTagName("ul")[0];
        var p = document.getElementById("wrapper").getElementsByTagName("p")[0];
        var wrapper = document.getElementById("wrapper");
        var n = 0;
        var arr = [
            "banner/1.jpg.webp",
            "banner/2.jpg",
            "banner/3.jpg",
            "banner/4.jpg",
            "banner/5.jpg",
            "banner/6.jpg",
            "banner/7.jpg",
            "banner/8.jpg"
        ]
        var str1 = "";
        var str2 = "";
        for(var i = 0;i<arr.length;i++){
            str1+="<li><img src=\""+arr[i]+"\"/></li>";
            str2+="<span></span>";
        }
        ul.innerHTML = str1;
        p.innerHTML = str2;
        span[0].className = "active";
        for(var i = 0;i<span.length;i++){
            span[i].index = i;
            span[i].onclick = function(){
                 for(var j = 0;j<span.length;j++){
                     span[j].className = "";
                     BufferMove(li[j],"opacity",0);
                 }
                 this.className = "active";
                 BufferMove(li[this.index],"opacity",100);
            }
        }
        //自动轮播
        //3、自动跑起来 --  定时器 -- 周期性
        var timer = setInterval(autoNext,4000);
        function autoNext(){
            n++;
            if(n==arr.length){
                n = 0; 
            }
            for(var j = 0;j<span.length;j++){
                     span[j].className = "";
                     BufferMove(li[j],"opacity",0);
            }
            span[n].className = "active";
            BufferMove(li[n],"opacity",100);
        }
 
        //8、鼠标移入移出
        wrapper.onmouseover = function(){
            //清除定时器
            clearInterval(timer);
        }
        wrapper.onmouseout = function(){
            //重新设置定时器 -- 重新赋值
            timer = setInterval(autoNext,4000);
        }
    </script>
</body>
</html>